<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">

<div th:replace="~{component/head::head}"></div>

<link href="/static/css/signin.css" rel="stylesheet">

<body class="text-center">

<main class="form-signin" id="app">
  <form>
    <h1 class="h3 mb-3 fw-normal">登 录</h1>

    <div class="form-floating">
      <input v-model="loginMember.loginName" class="form-control" id="loginNameInput" placeholder="登录名">
      <label for="loginNameInput">登录名</label>
    </div>
    <div class="form-floating">
      <input v-model="loginMember.passwordOri" type="password" class="form-control" id="passwordInput"
             placeholder="密码">
      <label for="passwordInput">密码</label>
    </div>

    <button @click="login" class="w-100 btn btn-lg btn-primary mt-3" type="button">登 录</button>
    <p class="mt-3 mb-3 text-muted">
      <a href="/register" class="float-start">我要注册</a>
      <span class="float-end">
        甲蛙支付平台
      </span>
    </p>
  </form>
</main>

</body>
</html>
<script>
  const {createApp, ref, onMounted} = Vue;
  const app = createApp({
    setup() {
      const loginMember = ref();
      loginMember.value = {
        loginName: "test1",
        passwordOri: "a111111",
        password: "",
      };

      const login = () => {
        // 校验
        if (1 !== 1
          || !Validator.require(loginMember.value.loginName, "登录名")
          || !Validator.require(loginMember.value.passwordOri, "密码")
        ) {
          return;
        }

        // 如果不用passwordOri，只用password，则会将计算md5后的32位数值显示到文本框中
        loginMember.value.password = hexMd5(loginMember.value.passwordOri + KEY);
        // 清空原始密码，传输不安全
        loginMember.value.passwordOri = null;
        axios.post('/system/member/login', loginMember.value).then((response) => {
          const data = response.data;
          if (data.success) {
            // 登录成功后，将用户存储到全局变量中
            store.setMember(data.content);
            window.location.href="/";
          } else {
            Msg.warning(data.message);
          }
        });
      };

      onMounted(() => {
      });

      return {
        loginMember,
        login,
      }
    }
  });
  app.mount("#app");
</script>
